<template>
  <div class="bk">
    <div class="sub">Subscribe</div>
    <div style="margin-top: 50px;margin-left: -40px">
      <el-form label-width="100px">
        <el-form-item prop="category">
          <span slot="label">
            <span style="color:#00a6ff">订阅栏目:</span>
          </span>
          <el-select v-model="category" placeholder="请选择订阅栏目" style="width: 340px"
                     clearable
          >
            <el-option v-for="item in categoryList" :key="item.selectCategory" :label="item.selectCategory"
                       :value="item.selectCategory"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="phone">
          <span slot="label">
            <span style="color:#00a6ff">电话号码:</span>
          </span>
          <el-input placeholder="请输入电话号码" v-model="phone" clearable style="width: 340px"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openSubDialog" style="width: 410px;margin-left: -70px">
            订阅
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="确认"
      :visible.sync="subDialogVisible"
      width="30%"
    >
      <div>手机号 {{ phone }} 确认订阅 {{ category }} 栏目？</div>
      <div style="display: flex;margin-top: 40px">
        <el-button type="primary" @click="handleSubscribe" style="margin-right: 20px">确 定</el-button>
        <el-button @click="subDialogVisible=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { hello } from '@/api/user'
import { subscribe } from '@/api/subscribe'

export default {
  name: 'NewsSubscribe',
  data() {
    return {
      word: '',
      category: '',
      phone: '',
      subDialogVisible: false,
      categoryList: [
        { selectCategory: '生活' },
        { selectCategory: '国际' },
        { selectCategory: '国内' },
        { selectCategory: '经济' },
        { selectCategory: '娱乐' },
        { selectCategory: '运动' },
        { selectCategory: 'IT' },
        { selectCategory: '科学' }
      ]
    }
  },
  mounted() {
    hello().then(data => {
      this.word = data
    })
  },
  methods: {
    openSubDialog() {
      if (this.category === '') {
        this.$message.error('订阅栏目不能为空！')
        return
      } else if (this.phone === '') {
        this.$message.error('手机号不能为空！')
        return
      }
      this.subDialogVisible = true
    },
    handleSubscribe() {
      subscribe().then(()=>{
        this.$message.success('订阅成功！')
        this.category = ''
        this.phone = ''
      }).catch((err)=>{
        this.$message.success('订阅失败:'+err)
      }).finally(()=>{
        this.subDialogVisible=false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-label {
  color: #00a6ff;
}

.bk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/b9.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sub {
  pointer-events: all;
  font-size: 62px;
  color: #00a6ff;
  font-weight: bold;
  letter-spacing: 5px;
  cursor: pointer;
  transition: 0.5s;
  opacity: 1;
  -webkit-user-select:none;/*谷歌 /Chrome*/
  -moz-user-select:none; /*火狐/Firefox*/
  -ms-user-select:none;    /*IE 10+*/
  user-select:none;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.sub:hover {
  margin-right: 10px;
  animation: fadeInOut 3s infinite;
}

.sub::after {
  font-size: 20px;
  content: " us";
  transition: 0.5s;
}

.sub:hover {
  color: #fff;
  /* 文字阴影 */
  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff, 0 0 120px #fff, 0 0 160px #fff;
}


</style>
